<template>
  <button
    class="dk-button" :form-type="formType" :open-type="openType" :class="isClicked ? 'click-button' : ''"
    :style="_style" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="handleClick"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'DkButton',
  props: {
    openType: { default: '', type: String },
    formType: { default: '', type: String },
    type: { default: 'primary', type: String },
    size: { default: 'normal', type: String },
    shape: { default: 'square', type: String },
    plain: { default: false, type: Boolean },
    text: { default: '点击跳转', type: String },
    color: { default: '', type: String },
  },
  data() {
    return {
      isClicked: false,
    }
  },
  computed: {
    _style() {
      const style = {}
      style.borderWidth = '1px'
      style.borderStyle = 'solid'
      style.color = '#fff'
      style.height = '40px'
      style.lineHeight = '40px'

      switch (this.type) {
        case 'info':
          style.color = '#323233'
          style.backgroundColor = '#fff'
          style.borderColor = '#ebedf0'
          if (this.plain)
            style.color = '#909399'

          break
        case 'primary':
          style.backgroundColor = '#3c9cff'
          style.borderColor = '#3c9cff'
          if (this.plain)
            style.color = '#3c9cff'

          break
        case 'error':
          style.backgroundColor = '#FE2C55'
          style.borderColor = '#FE2C55'
          if (this.plain)
            style.color = '#FE2C55'

          break
        case 'warning':
          style.backgroundColor = '#f9ae3d'
          style.borderColor = '#f9ae3d'
          if (this.plain)
            style.color = '#f9ae3d'

          break
        case 'success':
          style.backgroundColor = '#5ac725'
          style.borderColor = '#5ac725'
          if (this.plain)
            style.color = '#5ac725'

          break
      }

      if (this.color) {
        style.backgroundColor = this.color
        style.borderColor = this.color
        style.color = this.color
      }
      if (this.plain)
        style.backgroundColor = '#fff'

      if (this.size === 'mini') {
        style.height = '22px'
        style.lineHeight = '22px'
        style.fontSize = '14px'
      }

      if (this.size === 'large') {
        style.height = '50px'
        style.lineHeight = '50px'
      }
      if (this.shape === 'circle')
        style.borderRadius = '999px'

      return style
    },
  },
  methods: {
    handleTouchStart() {
      this.isClicked = true
    },
    handleTouchEnd() {
      setTimeout(() => {
        this.isClicked = false
      }, 200) // 根据需求设置延时，模拟按下后恢复的效果
    },
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style scoped>
	.dk-button {
		overflow: hidden;
	}

	.dk-button.click-button {
		opacity: 0.8;
	}
</style>
